<template>
	<view class="myFarm">
		<view class="top">
			<view class="title df">
				<view class="text">
					{{taskInfo.plantName}}
				</view>
				<view class="icons df">
					<view class="icon" :class="type == 'photo' ? 'bacf' : ''" @click="type = 'photo'">
						<u-icon name="photo" color="#17CC77" size="26" class="uIcon"></u-icon>
					</view>
					<view class="icon" :class="type == 'camera' ? 'bacf' : ''" @click="type = 'camera'">
						<u-icon name="play-right" color="#17CC77" size="26"></u-icon>
					</view>
				</view>
			</view>
			<view class="image">
				<image v-if="type == 'photo'" class="com" :src="taskInfo.picUrl" mode=""></image>
				<video v-if="type == 'camera'" class="com"src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" controls autoplay></video>
			</view>
			<view class="detail">
				<view class="com df" style="justify-content: space-between;">
					<view>
						<view class="tt">认养人</view>
						<view class="num" style="display: inline-block;">：{{taskInfo.fosterName}}</view>
					</view>
				</view>
				<view class="com df">
					<view class="tt">品种</view>
					<view class="num">：{{taskInfo.variety}}</view>
				</view>
				<view class="com df">
					<view class="tt">认养编号</view>
					<view class="num">：{{taskInfo.fosterId}}</view>
				</view>
				<view class="com df">
					<view class="tt">认养时间</view>
					<view class="num">：{{taskInfo.fosterTime}}</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view>
				<view class="bottom-content">
					<text>任务信息</text>
					<view style="padding: 10rpx;">
						<view class="com df">
							<view class="tt">任务类型：</view>
							<view class="df">
								<view class="text">{{taskInfo.taskType}}</view>
							</view>
						</view>
						<view class="com df" v-if="taskInfo.whetherVariableInput == 1">
							<view class="tt">投入品：</view>
							<view class="df">
								<view class="text">{{taskInfo.variableInput}}</view>
							</view>
						</view>
						<view class="com df">
							<view class="tt">下发时间：</view>
							<view class="df">
								<view class="text">{{taskInfo.taskIssueTime}}</view>
							</view>
						</view>
						
						<view class="com df" v-if="taskInfo.whetherVariableInput == 1">
							<view class="tt">投入量：</view>
							<view class="type df">
								<view class="text input">
									<u-input border="surround" number v-model="formData.input"></u-input>
								</view>
								<view class="image" style="color: #1D1D1D;">g</view>
							</view>
						</view>
						<view class="com df" v-if="taskInfo.taskType == '采收'">
							<view class="tt">产出物：</view>
							<view class="df">
								<view class="text">{{taskInfo.variety}}</view>
							</view>
						</view>
						<!-- <view class="com df" v-if="taskInfo.taskType == '采收'">
							<view class="tt">部位：</view>
							<view class="df">
								<view class="text">{{taskInfo.part}}</view>
							</view>
						</view> -->
						<view class="com df" v-if="taskInfo.taskType == '采收'">
							<view class="tt">产出数量：</view>
							<view class="type df">
								<view class="text input">
									<u-input border="surround" number v-model="formData.number"></u-input>
								</view>
								<view class="image" style="color: #1D1D1D;">g</view>
							</view>
						</view>
						<view class="upload">
							<image v-if="hasUpload" class="del" src="../../static/del.png" @tap="del"></image>
							<view @click="upload">
								<view class="upload-box" v-if="!hasUpload">
									<view>+</view>
									<view>拍摄照片或者图库上传</view>
								</view>
								<view v-else>
									<u-image width="325px" height="225px" :src="formData.uploadedImage" mode="widthFix"></u-image>
								</view>
							</view>
						</view>
						<!-- <view class="com df" style="border: 0;">
							<view class="tt">坐标：</view>
							<view class="df">
								<text>{{taskInfo.coords[0].lat}},</text>
								<text>{{taskInfo.coords[0].lng}}</text>
							</view>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="highter">
			<button class="bottom-btn-left" @tap="confirm">{{taskInfo.taskType == "采收" ? "全部采收":"确认" }}</button>
			<button class="bottom-btn-right" v-if="taskInfo.taskType == '采收'" @tap="confirm('部分采收')">部分采收</button>
		</view>
	</view>
</template>

<script>
	import {operatorFindTaskDetailById,uploadImage,disposeTask} from "@/api/api.js"
	export default {
		data() {
			return {
				hasUpload:false,
				profile:{
					name:'张三',
					category:'苹果',
					code:'42342355555',
					date:'2022-09-09 13:33:22'
				},
				formData:{
					number:0,
					uploadedImage:'',
					input:'',
				},
				type: 'photo',
				taskId:'',
				landId:'',
				taskInfo:{},
			}
		},
		onLoad(routerParams) {
			this.taskId = routerParams.taskId
			this.landId = routerParams.landId
			this.FindTaskDetailById()
		},
		methods:{
			async FindTaskDetailById(){
				uni.showLoading({
					mask:true,
				})
				let query = `taskId=${this.taskId}&plantId=${this.landId}`
				const res = await operatorFindTaskDetailById(query)
				console.log(res);
				if(res?.data.code == 200){
					this.taskInfo = res.data.data
					uni.hideLoading()
				}else{
					uni.hideLoading()
					uni.showToast({
						title:"获取数据失败",
						icon:'error'
					})
				}
				
			},
			async uploadPhoto(data) {
				let that = this
				const res = await uploadImage(data)
				console.log(res);
				if(res?.data){
					let data = JSON.parse(res.data)
					if(data.status == 'success'){
						that.formData.uploadedImage = data.path
						uni.showToast({
							icon:"success",
							title:'上传成功'
						})
					}else{
						uni.showToast({
							icon:"error",
							title:"上传失败"
						})
					}
				}
			},
			upload(){
				let that = this
				uni.chooseMedia({
					count: 1, //默认9
					mediaType:["image"],
					sourceType: ['album','camera'], //从相册选择
					success: function (res) {
						uni.showLoading({
							title:' ',
							mask:true,
						})
						if(res){
							uni.hideLoading()
							let imageData = res.tempFiles[0].tempFilePath
							that.hasUpload = true
							that.uploadPhoto(imageData)
						}
						
					},
					fail: (err) => {
						uni.showToast({
							icon:"error",
							title:'上传失败'
						})
						that.formData.uploadedImage = ''
						that.hasUpload = false
					}
				})
			},
			async handleTask(data){
				const res = await disposeTask(data)
				console.log(res);
				if(res?.data.code == 200){
					uni.showToast({
						icon:'success',
						title:res.data.msg,
					})
					setTimeout(()=>{
						uni.redirectTo({
							url:"/pages/operator/orderTask"
						})
					},1000)
				}else{
					uni.showToast({
						icon:'error',
						title:res.data.msg,
					})
				}
			},
			confirm(partRecovery){
				console.log(this.formData);
				const {number,uploadedImage} = this.formData
				console.log(number);
				if(number>=0 && uploadedImage){
					let params = {
						taskId:this.taskId,
						plantId:this.landId,
						taskOperatorPicUrl:this.formData.uploadedImage,
						taskType:this.taskInfo.taskType,
						outputGoods:this.taskInfo.variety,
						outputNum:this.formData.number,
						input:this.formData.input,
						variableInput:this.taskInfo.variableInput
						
					}
					if(partRecovery == "部分采收"){
						params.partRecovery = partRecovery
					}
					this.handleTask(params)
					
					
				}else{
					uni.showToast({
						icon:"error",
						title:'产出量不能为负数'
					})
				}
			},
			del(){
				this.formData.uploadedImage = ''
				this.hasUpload = false
			}
		},
	}
</script>

<style lang="scss" scoped>
	.highter{
		height: 140rpx;
		display: flex;
		.bottom-btn-left{
			background-color: #17CC77;
			color: #FFFFFF;
			width:300rpx;
			height: 80rpx;
			line-height: 80rpx;
			&:active{
				opacity: .8;
			}
		}
		.bottom-btn-right{
			background-color: #17CC77;
			color: #FFFFFF;
			width:300rpx;
			height: 80rpx;
			line-height: 80rpx;
			&:active{
				opacity: .8;
			}
		}
	}
	
	.myFarm {
		.df {
			display: flex;
		}
		.flex-warp{
			flex-wrap: wrap;
		}
		.top {
			width: 690rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 0rpx 0rpx 36rpx 36rpx;
			padding: 20rpx 30rpx 30rpx;
			border-top: 1px solid rgba(0, 0, 0, 0.12);
			.title {
				font-size: 30rpx;
				color: #1d1d1d;
				font-weight: bold;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.text {
					height: 68rpx;
					line-height: 68rpx;
				}

				.icons {
					// width: 212rpx;
					// height: 56rpx;
					background: #EFEFEF;
					border-radius: 11rpx;
					padding: 4rpx;

					.icon {
						// width: 102rpx;
						// height: 56rpx;
						border-radius: 11rpx;
						padding: 5rpx 28rpx;
					}

					.bacf {
						background: #FFFFFF;
					}
				}
			}

			.image {
				width: 690rpx;
				height: 374rpx;
				border-radius: 20rpx;
				overflow: hidden;

				.com {
					width: 690rpx;
					height: 374rpx;
					
				}
			}

			.detail {
				margin-top: 30rpx;

				.com {
					font-size: 26rpx;
					margin-top: 25rpx;

					.tt {
						display: inline-block;
						width: 130rpx;
						text-align: justify;
						text-align-last: justify;
						color: rgba(68, 78, 104, 0.7);
					}

					.num {
						color: #1d1d1d;
					}
				}
			}
		}

		.bottom {
			padding: 20rpx 0rpx 40rpx 0rpx;
			display: flex;
			justify-content: center;
			.upload{
				width: 100%;
				padding: 20rpx 0;
				position: relative;
				.del{
					z-index: 2;
					top: 25rpx;
					right: -10rpx;
					position: absolute;
					width: 60rpx;
					height: 60rpx;
				}
				.upload-box{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 40rpx;
					height: 260rpx;
					background-color: #f7f7f7;
					border-radius: 12rpx;
					view:nth-child(1){
						font-size: 68rpx;
					}
					view:nth-child(2){
						font-size: 33rpx;
					}
				}
			}
			.bottom-content {
				width: 650rpx;
				// height: 108rpx;
				background: #FFFFFF;
				padding: 30rpx;
				box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.12);
				border-top: 1px solid rgba(0, 0, 0, 0.12);
				.com {
					justify-content: space-between;
					font-size: 30rpx;
					height: 30rpx;
					padding: 30rpx 0;
					border-bottom: 2rpx solid #f0f0f0;
					
					.tt {
						color: rgba(68, 78, 104, 0.7);
					}
			
					.type {
						color: #17CC77;
			
						.text {
							margin-right: 18rpx;
						}
			
						.input {
							margin-top: -20rpx;
							width: 180rpx;
						}
			
						.image {
							width: 12rpx;
							height: 22rpx;
			
							image {
								margin-top: 10rpx;
								width: 12rpx;
								height: 22rpx;
							}
						}
					}
				}
			}
			.btn {
				padding: 0 40rpx;
				float: right;
				margin-top: 20rpx;
				width: 188rpx;
				height: 60rpx;
				background: #17CC77;
				border-radius: 8rpx;
				border: 2rpx solid #17CC77;
				text-align: center;
				line-height: 60rpx;
				color: #FFFFFF;
			}
			.btn2 {
				padding: 0 40rpx;
				float: right;
				margin-top: 20rpx;
				width: 188rpx;
				height: 60rpx;
				background: #f1f1f1;
				border-radius: 8rpx;
				border: 2rpx solid #e2e2e2;
				text-align: center;
				line-height: 60rpx;
				color: #c1c1c1;
			}
			.vfor {
				margin-bottom: 20rpx;
				overflow: hidden;
				background: #FFFFFF;
				padding: 35rpx 20rpx 20rpx;
			
				.title {
					font-size: 30rpx;
					color: #282828;
					margin-bottom: 42rpx;
					font-weight: bold;
				}
			
				.detail {
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid rgba(0, 0, 0, 0.12);
			
					.image {
						width: 290rpx;
						height: 200rpx;
						border-radius: 20rpx;
						margin-right: 26rpx;
					}
			
			
					.right {
						padding-top: 23rpx;
			
						
					}
				}
			
			
				.com {
					font-size: 26rpx;
					margin-bottom: 20rpx;
			
					.tt {
						color: rgba(68, 78, 104, 0.7);
						white-space: nowrap;
						text-align-last: justify;
						width: 130rpx;
					}
			
					.content {
						color: #1D1D1D;
						text-align: left;
					}
				}
			}
			.statistics {
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.04);
				margin-bottom: 20rpx;

				.area {
					padding: 30rpx 0;
					border-bottom: 1rpx solid rgba(0, 0, 0, 0.12);

					.com {
						width: 229rpx;
						color: #1D1D1D;

						.tt {
							text-align: center;
							font-size: 26rpx;
							margin-bottom: 32rpx;
						}

						.num {
							font-size: 30rpx;
							font-weight: bold;
							text-align: center;
						}
					}

					.line {
						margin-top: 10rpx;
						height: 88rpx;
						width: 1rpx;
						background: rgba(0, 0, 0, 0.12);
					}
				}

				.check {
					padding: 30rpx 20rpx;

					.tt {
						font-size: 30rpx;
						font-weight: bold;
						color: #17cc77;
						margin-bottom: 46rpx;
						text-align: center;
					}

					.typeT {
						font-size: 28rpx;
						font-weight: bold;
						color: #1D1D1D;
						margin-bottom: 34rpx;
					}

					.type {
						justify-content: space-between;
						flex-wrap: wrap;
						margin-bottom: 44rpx;

						.vfor {
							width: 188rpx;
							height: 66rpx;
							background: #F3F5F4;
							border-radius: 8rpx;
							line-height: 66rpx;
							text-align: center;
							font-size: 28rpx;
						}

						.active {
							background: #17CC77;
							color: #FFFFFF;
						}
					}
				}

				.btn {
					width: 280rpx;
					height: 84rpx;
					background: #1BC46D;
					box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(27, 196, 109, 0.4);
					border-radius: 12rpx;
					line-height: 84rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 32rpx;
					margin: auto;
				}
			}

			.tab {
				justify-content: space-between;
				
				.com {
					box-sizing: border-box;
					width: 328rpx;
					height: 148rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.04);
					padding: 10rpx;
					margin: 10rpx 0;
					position: relative;
					overflow: hidden;

					.yuan {
						width: 116rpx;
						height: 120rpx;
						background: #17CC77;
						opacity: 0.1;
						border-radius: 50%;
						position: absolute;
						top: 48rpx;
						left: -20rpx;
					}

					.image {
						width: 108rpx;
						height: 108rpx;
						margin-right: 22rpx;
					}

					.text {
						font-size: 30rpx;
						font-weight: bold;
						color: #1d1d1d;
						line-height: 108rpx;
					}
				}
			}
		}
		.label{
			font-weight: 600;
			margin:20rpx 0;
		}
		.panel{
			background-color: #FFFFFF;
			padding: 20rpx;
			.container{
				.time{
					font-size: 27rpx;
					color: #9f9f9f;
					margin: 10rpx 0;
				}
				.content-container{
					padding: 20rpx 20rpx;
					border-radius: 12rpx;
					background-color: #f5f5f5;
					.title{
						font-size: 28rpx;
					}
					.content{
						margin-top: 10rpx;
						font-weight: 600;
						font-size: 30rpx;
					}
				}
			}
		}
		.bottom-button{
			background-color: #FFFFFF;
				border-top: 2rpx solid #f3f3f3;
				text-align: center;
				line-height: 80rpx;
				font-size: 28rpx;
				color: #17CC77;
			}
	}
</style>